<template>
  <div class="header">
    <img src="../assets/logo1.png" />
    <span class="title"> 欢迎来到{{ shopName }} </span>
    <div class="logout" @click="logout">退出</div>
    <img :src="qrcode" class="qrcode-min" />
    <img :src="qrcode" class="qrcode-original" />
  </div>
</template>

<script>
import Cookie from 'js-cookie';
import {http, catchAppError} from '@/util';
import url from '@/config';

export default {
  name: 'Header',
  data() {
    return {
      qrcode: '',
      shopName: ''
    };
  },
  beforeMount() {
    http
      .post(url.shop)
      .then(res => {
        this.qrcode = res.ticket;
        this.shopName = res.shop_name;
      })
      .catch(catchAppError);
  },
  methods: {
    logout() {
      Cookie.remove('token');
      window.location.href = '/login';
    }
  }
};
</script>

<style lang="scss">
.el-header {
  padding: 6px 25px 9px;
  line-height: 46px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  .header {
    position: relative;
    img {
      vertical-align: middle;
    }
    .title {
      display: inline-block;
      vertical-align: middle;
      margin-left: 60px;
    }
    .logout {
      float: right;
      &:hover {
        cursor: pointer;
      }
    }
    .qrcode-original {
      display: none;
      position: absolute;
      width: 120px;
      height: 120px;
      top: 20px;
      right: 120px;
      z-index: 20;
    }
    .qrcode-min {
      float: right;
      margin-right: 30px;
      width: 30px;
      height: 30px;
      margin-top: 8px;
      cursor: pointer;
      &:hover {
        & + .qrcode-original {
          display: block;
        }
      }
    }
  }
}
</style>
